<template>
  <div class="driver">
    <div class="form">
       <el-form ref="form" :model="form" :rules="rule"  label-width="auto"  :inline="true" size="mini">

            <el-form-item prop="wdcTime" label="日期：">
              <el-date-picker type="date" v-model="form.wdcTime" clearable  value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item prop="trkType" label="车型：">
              <el-select v-model="form.trkType" clearable>
                  <el-option v-for="(item,index) in car" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="trkNo" label="车牌号：">
              <el-input v-model="form.trkNo" clearable></el-input>
            </el-form-item>
         <el-form-item prop="" label="">
        <el-button type="primary" size="mini" @click="search">查 询</el-button>
           </el-form-item>
    </el-form>
    </div>
    <div class="btn">
      <el-button plain size="mini" type="success" @click="all">全部发布</el-button>
      <el-button plain size="mini" type="primary" @click="add">新增</el-button>
      <el-button plain size="mini" type="primary" @click="editsave">保存</el-button>
      <el-button plain size="mini" type="danger" @click="del">删除</el-button>
    </div>
    <div class="table" ref="inner">
       <el-table :data="tableData" border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
          >
         <el-table-column :index="indexMethod" type="index"  align="center" label=" " width="50"></el-table-column>
        <el-table-column  align="center" prop="wdcTime" label="日期" show-overflow-tooltip min-width="200" sortable></el-table-column>
        <el-table-column  align="left" prop="trkNo" label="车牌号" show-overflow-tooltip min-width="150" sortable></el-table-column>
        <el-table-column  align="left" prop="wdcDvrId" label="司机" show-overflow-tooltip min-width="180" sortable>
          <template slot-scope="scope">
              <el-select v-model="scope.row.wdcDvrId" :disabled="!(tag===scope.row.wdcId)">
                  <el-option v-for="(item,index) in driver" :key="index" :value="item.uuid" :label="item.dvrName"></el-option>
              </el-select>
          </template>
        </el-table-column>
        <el-table-column  align="left" prop="trkTypeName" label="车型" show-overflow-tooltip min-width="200" sortable></el-table-column>
        <el-table-column  align="center" prop="wdcInsertdt" label="创建时间" show-overflow-tooltip min-width="200" sortable></el-table-column>
        <el-table-column  align="left" prop="wdcInsertuser" label="创建员工" show-overflow-tooltip min-width="150" sortable></el-table-column>
        <el-table-column  align="center" prop="wdcLstupddt" label="最后修改时间" show-overflow-tooltip min-width="200" sortable></el-table-column>
        <el-table-column  align="left" prop="wdcLstupduser" label="最后修改员工" show-overflow-tooltip min-width="150" sortable></el-table-column>
       </el-table>
    </div>
    <div class="pages">
       <el-pagination
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    </div>
    <!-- 对话框 新增 编辑 -->
     <el-dialog
    :title="name"
    width="35%"
    :visible.sync="openDialog"
    v-if="openDialog"
    v-el-drag-dialog
    :before-close="close"
    :close-on-click-modal="false"
     >
     <el-form :model="dialogForm" size="mini" :rules="dialogRule"  ref="dialogForm" label-width="auto">
         <el-row :gutter="20">

            <el-form-item prop="wdcTime" label="日期：">
              <el-col :span="20">
              <el-date-picker type="date" v-model="dialogForm.wdcTime" style="width:90%"   value-format="yyyy-MM-dd" clearable :disabled="see"></el-date-picker>
              </el-col>
            </el-form-item>

        </el-row>
        <el-row :gutter="20">
            <el-form-item prop="trkNo" label="车牌号：" >
              <el-col :span="20">
              <el-select v-model="dialogForm.trkNo" style="width:90%">
                <el-option v-for="(item,index) in carNum" :key="index" :value="item.uuid" :label="item.trkNo"></el-option>
              </el-select>
              </el-col>
            </el-form-item>
        </el-row>
        <el-row :gutter="20">
            <el-form-item prop="wdcDvrId" label="司机：">
              <el-col :span="20">
               <el-select v-model="dialogForm.wdcDvrId"  style="width:90%">
                 <el-option v-for="(item,index) in driver" :key="index" :value="item.uuid" :label="item.dvrName"></el-option>
              </el-select>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-form-item prop="wdcRemark" label="备注：" >
               <el-col :span="20">
              <el-input type="textarea" v-model="dialogForm.wdcRemark" :rows="2" style="width:90%"></el-input>
               </el-col>
            </el-form-item>
        </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" >
      <el-button type="primary" @click="save" v-if="!see" size="mini">保存</el-button>
      <el-button  @click="close" size="mini">关闭</el-button>
      </div>
     </el-dialog>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import {addOrEditTmAttendancecar,getTmAttendanceList,getRefCodesByType,getDriverModelList,getVehicleModelList,
  addAllTmAttendancecar,delTmAttendancecar} from '@/request/api'
export default {
  name:'router.transport',
  mixins:[paginationMixin,resizeMixin],
  data(){
    return{
      date:'',
      form:{
        wdcTime:'',
        trkNo:'',
        trkType:''
      },
      rule:{
        wdcTime:[{required:true,message:'请选择发布日期',trigger:'blur'}]
      },
      tag:'',
      driver:[],//司机
      carNum:[],//车牌
      car:[{code:'1',name:'中型货车'}],//车型下拉框
      maxHeight:-1,
      currentData:{},
      issuse:'',
      list:[{code:'tx',name:'头像'},{code:'sfzz',name:'身份证正面'},{code:'sfzb',name:'身份证反面'},{code:'jsz',name:'驾驶证'}],
      // 对话框
      name:'',
      openDialog:false,
      dialogForm:{},
      dialogRule:{
        wdcTime:[{required:true,message:'请输入日期',trigger:'blur'}],
        trkNo:[{required:true,message:'请输入车牌号',trigger:'blur'}],
        wdcDvrId:[{required:true,message:'请输入司机名称',trigger:'blur'}],

      },
      edit:false,// 编辑模式
      see:false,//查看模式
      tableData:[]
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.getdatatime()
    this.refreshList()
    getRefCodesByType('车型_网络').then(res=>{
      if(res.success==='1'){
        this.car=res.data.FTKJWLHYPT

      }
    })
    //司机
    getDriverModelList({
      dvrName:'',
      PageIndexs:'',
      PageSizes: '',
    }).then(res=>{
      if(res.success==='1'){
        this.driver=res.data.FTKJWLHYPT
      }
    })
    getVehicleModelList({
      dvrName:'',
      PageIndexs: '',
      PageSizes: ''
    }).then(res=>{
      this.carNum=res.data.FTKJWLHYPT
    })
  },
  methods:{
    search(){
      this.refreshList()
      this.tag=''
    },
    getList(currentPage, pageSize, updateTotal){
      getTmAttendanceList({
        wdcTime:this.form.wdcTime,
        trkType:this.form.trkType,
        trkNo:this.form.trkNo,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        this.tableData = response.data.FTKJWLHYPT
        if(this.tableData.length>0)
        {
          this.tableData.forEach((item,index)=>{
            this.tableData[index]['wdcDvrId']=item.wdcDvrId.toString()
          })
          // console.log(this.tableData)
        }

        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    formmate(str){
      const date = new Date(str)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}-${month}-${day}`
    },
    getdatatime(){//默认显示今天

      // this.date=`${year}-${month}-${day}`
      var time=new Date()
      this.form.wdcTime= this.formmate(time)
      this.dialogForm.wdcTime=this.formmate(time)
    },
    //单击行
    rowClick(row){
      this.currentData=row
      this.tag=row.wdcId
    },
    //删除
    del(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要删除的数据','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.$confirm('确定要删除该数据吗？','提示',{
        confirmButtonText:'确定'
      }).then(()=>{
        this.form.wdcTime=this.formmate(this.form.wdcTime)
        delTmAttendancecar({
          wdcTime:this.form.wdcTime,
          wdcTrkId:this.currentData.wdcTrkId
        }).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'删除成功！',
              showClose:true
            })
            this.close()
          }
        })
      })
    },
    //保存
    save(){
      this.$refs.dialogForm.validate(valid=>{
        if(valid){
          this.dialogForm.wdcTrkId=this.dialogForm.trkNo

          this.dialogForm.wdcTime=this.formmate(this.dialogForm.wdcTime)
          //新增
          addOrEditTmAttendancecar(this.dialogForm).then(res=>{
            if(res.success==='1'){
              this.$message({
                type:'success',
                message:'新增数据成功',
                showClose:true
              })
              this.close()
            }
          })

        }
      })
    },
    //编辑
    editsave(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要保存的数据','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      addOrEditTmAttendancecar(this.currentData).then(res=>{
        if(res.success==='1'){
          this.$alert('保存成功！','提示',{
            confirmButtonText:'确定'
          })
          this.close()
        }
      })

    },
    //新增
    add(){
      this.openDialog=true
      this.see=false
      this.edit=false
      this.name='新增信息'
      let date=new Date()
      this.dialogForm={
        wdcTime:date,
        trkNo:'',
        swdcDvrId:'',
        wdcRemark:''
      }
    },
    //全部发布
    all(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.form.wdcTime=this.formmate(this.form.wdcTime)
          addAllTmAttendancecar({wdcTime:this.form.wdcTime}).then(res=>{
            if(res.success==='1'){
              this.$alert('运力发布成功！','提示',{
                confirmButtonText:'确定'
              })
            }
          })
        }else{
          this.$alert('请选择发布日期','提示',{
            confirmButtonText:'确定'
          })
        }
      })


    },
    //关闭对话框
    close(){
      this.openDialog=false
      this.currentData={}
      this.refreshList()
      this.tag=''
    }
  }
}
</script>
<style lang="scss" scoped>
.driver{
  width:100%;
  height:100%;
  padding:15px 15px 12px;
  display:flex;
  flex-direction:column;
  .form{
    height:30px;
  }
  .btn{
    height:50px;
    line-height:50px;
  }
  .table{
    flex:1;
  }
  .pages{
    height:30px;
  }

  .box{  //上传对话框
  overflow:hidden;
  height: 200px;
    .selectItem{
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
    .upload{
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
  }
}

</style>
